<template>
	<view>
		<!-- 头部标题 -->
		<view class="cu-bar bg-white">
			<view class="action sub-title">
				<text class="text-xl text-bold text-green">抢答</text>
				<text class="bg-green"></text>
				<!-- last-child选择器-->
			</view>
		</view>
		<!-- 头部标题 end -->


		<!-- 没有强答状态 -->
		<view v-if="status==false" class="bg-white" style="width: 100%;height: 86vh;display: flex;justify-content: center;align-items: center;flex-direction: column;">
			<image src="../../static/logo.png" style="height: 300upx;width: 300upx;border-radius: 100%;"></image>
			<text style="margin-top: 20upx;font-weight: 550;">老师还没有发起抢答活动或活动已结束</text>
		</view>
		<!-- end -->



		<!-- 抢答人数 -->
		<view class="" v-if="status==true">
			<view class="bg-white" style="width: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column;">
				<text style="font-size: 35upx;font-weight: 550;">老师开起了抢答功能，赶快来答题吧~~~</text>
				<!-- <text style="font-size: 35upx;font-weight: 550;margin-top: 20upx;">本次答题人数为人</text> -->
			</view>

			<view class="bg-white" style="display: flex;justify-content: space-around;" :key="index" v-for="(item,index) in dataList">

				<view class="" style="display: flex;justify-content: center;align-items: center;flex-direction: column;">
					<image :src="'http://39.96.88.209:8080'+item.headImg" style="border-radius: 100%;height: 200upx;width: 200upx;margin-top: 10upx;"
					 mode=""></image>
					<text style="font-weight: 550;">{{item.uname}}</text>
				</view>

			</view>

		</view>
		<!-- end -->

		<view class="padding flex flex-direction ">
			<button v-if="canUse==true?true:false" @click="answer()" class="cu-btn bg-red margin-tb-sm lg">抢答{{num > 0 ? '+'+num : ''}}</button>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: false, //状态
				num: 0, //抢答点击数量,
				dataList: [],
				canUse:true
			}
		},
		onLoad() {
			this.getAnswerIsOpen()
		},
		methods: {
			answer() {
				var _this = this
				var clazzId = uni.getStorageSync('clazzId')
				var studentId = uni.getStorageSync('user_info').id
				var img = uni.getStorageSync('user_info').headImg
				var name = uni.getStorageSync('user_info').userName

				console.log(clazzId)
				// 发布
				uni.request({
					url: _this.api + "answer/history",
					method: "POST",
					header: {
						"content-type": "application/x-www-form-urlencoded"
					},
					data: {
						clazzId: clazzId,
						headImg: img,
						uid: studentId,
						uname: name

					},
					success: (res) => {
						console.log(res)
						if (res.data.code == 200) {
							uni.showToast({
								title: res.data.message,
								duration: 2000,
								icon: "none"
							})
							_this.getAnswerIsOpen()
						} else {
							_this.status = false
							uni.showToast({
								title: res.data.message,
								duration: 2000,
								icon: "none"
							})
						}
					},
					fail: (err) => {

					}
				})

			},
			//点击开始抢答
			getAnswerIsOpen: function() {
				var _this = this
				var clazzId = uni.getStorageSync('clazzId')
				var uname = uni.getStorageSync('user_info').userName
				console.log(clazzId)
				// 发布
				uni.request({
					url: _this.api + "answer/human",
					method: "POST",
					header: {
						"content-type": "application/x-www-form-urlencoded"
					},
					data: {
						clazzId: clazzId
					},
					success: (res) => {
						console.log(res)
						if (res.data.code == 200) {
							_this.status = true
							_this.dataList = res.data.data
							res.data.data.forEach(function(e,index){
								if(e.uname == uname){
									_this.canUse = false
								}
							})
						} else {
							_this.status = false
							uni.showToast({
								title: res.data.message,
								duration: 2000,
								icon: "none"
							})
						}
					},
					fail: (err) => {

					}
				})

			}
		}
	}
</script>

<style>

</style>
